<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        .slider-bar{
           position: absolute;
           left: 50%;
           top: 300px;
           margin-left: 600px;
           width: 45px;
           height: 130px;
           background-color: pink;
        }
        .w{
            width: 1200px;
            margin: 10px auto;
        }
        .header{
            
            height: 300px;
            background-color: pink;
            
        }
        .banner{
            height: 300px;
          
            background-color: aquamarine;
        }
        .main{
            height: 900px;
          
            background-color: yellowgreen;
        }
        span{
            display: none;
            position: absolute;
            bottom: 0;
            }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>

    </div>

    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>

    <script>
        // 1 获取元素
        var sliderbar = document.querySelector('.slider-bar');

        var banner = document.querySelector('.banner');
        //banner.offsetTop就是被卷去头部的大小 一定要写在滚动的外面
        var bannerTop = banner.offsetTop;

        // 获取 main 主题元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack')
        var mainTop = main.offsetTop;

        // 当我们侧边栏固定定位之后应该变化的数值
        var  sliderbarTop = banner.offsetTop - bannerTop

        // 2 页面滚动事件 scroll
        document.addEventListener('scroll',function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            console.log(window.pageYOffset);
            // 3  当我们的页面被卷去头部大于等于了172 此时侧边栏就要改为固定定位了
            if(window.pageYOffset >= bannerTop){
                sliderbar.style.position = 'fixed';
                sliderbar.style.top =sliderbarTop + 'px';
            }else{
                sliderbar.style.position = 'absolute';
                sliderbar.style.top ='300px';
            }
        
        if(window.pageYOffset >= mainTop){
            goBack.style.display = 'block';
              
            }else{
                goBack.style.display = 'none';
            }
        })

        // 点击返回顶部
        goBack.addEventListener('click',function() {
            // alert(1)
            // scoll 里面不需要跟单位
            // window.scroll(0,0);
            han(window , 0)
        })

        function han(a,b,c){
    // 先清除以前的定时器 只保留一个定时器 不然一直点会一直加速前进
    clearInterval(a.timer);
    a.timer = setInterval(function() {
        // 步长值要写在定时器里面
        // 不要出现小数的情况 往大了取
        // var step = Math.ceil(b - a.offsetLeft) / 10;
        var step = (b - window.pageYOffset) / 10;
      step =  step > 0 ? Math.ceil(step) : Math.floor(step);
    if(window.pageYOffset == b){
        // 停止动画 本质是停止计时器
        clearInterval(a.timer);

        // 回调函数要添加在定时器结束后面 加判断条件 有这个函数才能执行
      // if(c){
      //     c();
      // }
      c && c();
    }
    // 把每次加1 这个值改为一个慢慢变小的值  步长公式（目标值 - 现在的位置 / 10）
//    a.style.left = window.pageYOffset + step + 'px';
    window.scroll(0,window.pageYOffset + step)
},15)
}
    </script>
</body>
</html>